<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.分析生命周期</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
    生命周期
        将要创建数据代理==>调用beforeCreate()函数
        创建完毕数据代理==>调用created()函数
        将要挂载DOM==>调用beforeMount()函数
        挂载完毕DOM==>调用mounted()函数:发送ajax请求,启动定时器,绑定自定义事件,订阅消息等(初始化消息)
        更新DOM==>调用beforeUpdate()函数
        更新完毕DOM==>调用updated()函数
        将要销毁DOM==>调用beforeDestroy()函数: 清除定时器,解绑自定义事件,取消订阅消息等(收尾工作)
        销毁完毕DOM==>调用destroyed()函数
-->
    <!--  准备好一个容器  -->
    <div id="root">
        <h2>当前的n值是:{{n}}</h2>
      <button @click="add">点我n+=1</button>
    </div>
</body>

<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data: {
            n: 1
        },
        methods: {
            add(){
                this.n++
            }
        },
        beforeCreate(){
            console.log('beforeCreate')
        },
        created(){
            console.log('created')
        },
        beforeMount(){
            console.log('beforeMount')
        },
    })


</script>
</html>